<template xmlns:marginleft="http://www.w3.org/1999/xhtml" xmlns:margin-left="http://www.w3.org/1999/xhtml">
  <div>
    <div>
      <van-nav-bar
          title="积分商城"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <van-row>
      <van-col span="12" class="y1" >
        <div >
        <h6 >可用积分</h6>
      </div>
        <div >
          <label >{{integr.integral}}</label>

        </div>
      </van-col>
      <van-col span="10" >
        <van-icon name="point-gift-o" size="100" class="dv" />
      </van-col>
    </van-row>
    <div>
      <div>
      <van-tabs v-model:active="active" shrink>
        <van-tab title="积分明细 |">
          <div class="a1">
            <van-grid :border="false" :column-num="2">
              <van-grid-item >
                <img class="ig"
                    src="../assets/yhq.png"
                />
                <h6 class="dv2" >外卖波波家族券</h6>
                <h6 class="dv3" >{{ bn1.exchange }}</h6>
                <van-button type="primary" size="mini" @click="btn1()" >兑换</van-button>
              </van-grid-item>
              <van-grid-item >
                <img class="ig"
                    src="../assets/yhq.png"
                />
                <h6 class="dv2">外卖二赠一券</h6>
                <h6 class="dv3">2400积分</h6>
                <van-button type="primary" size="mini" @click="btn2()" >兑换</van-button>
              </van-grid-item>
            </van-grid>
          </div>
          <div class="a2">
            <van-grid :border="false" :column-num="2">

              <van-grid-item>
                <img class="ig"
                    src="../assets/yhq.png"
                />
                <h6 class="dv2">礼品优惠券</h6>
                <h6 class="dv3">2600积分</h6>
                <van-button type="primary" size="mini" @click="btn3()" v-model="bn3">兑换</van-button>
              </van-grid-item>
              <van-grid-item>
                <img class="ig"
                    src="../assets/yhq.png"
                />
                <h6 class="dv2">天天神券</h6>
                <h6 class="dv3">2400积分</h6>
                <van-button type="primary" size="mini" @click="btn4()" v-model="bn4">兑换</van-button>
              </van-grid-item>
            </van-grid>
          </div>

        </van-tab>
        <van-tab title="兑换记录">
          <div>
            <!-- 优惠券单元格 -->
            <van-coupon-cell
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                @click="showList = true"
            />
            <!-- 优惠券列表 -->
            <van-popup
                v-model:show="showList"
                round
                position="bottom"
                style="height: 90%; padding-top: 4px;"
            >
              <van-coupon-list
                  :coupons="coupons"
                  :chosen-coupon="chosenCoupon"
                  :disabled-coupons="disabledCoupons"
                  @change="onChange"
                  @exchange="onExchange"
              />
            </van-popup>

          </div>

        </van-tab>
      </van-tabs>
      </div>


    </div>
    <div>
      <van-empty description="没有更多了" />
    </div>
  </div>

</template>

<script>
import { ref } from 'vue';
export default {

  name: "IntegralView",
  data(){
    const onClickLeft = () => history.back();
    const coupon = {
      available: 1,
      condition: '无门槛使用',
      reason: '',
      value: 150,
      name: '礼品优惠券',
      startAt: parseInt(1657004724490 / 1000), // 卡有效开始时间 (时间戳, 单位秒)
      endAt: parseInt(1657005224439 / 1000) ,
      valueDesc: '200',
      unitDesc: '元',
    };
    const coupons = ref([coupon]);
    const showList = ref(false);
    const chosenCoupon = ref(-1);

    const onChange = (index) => {
      showList.value = true;
      chosenCoupon.value = index;
    };
    const onExchange = (code) => {
      coupons.value.push(coupon);
    };




    return{
      onClickLeft,
      coupons,
      showList,
      onChange,
      onExchange,
      chosenCoupon,
      disabledCoupons: [coupon],
      integr:{
        integral:""
      },
      bn1:{
        type:"gift_certificates",
        exchange:"2600"
      },
      bn2:{
        type:"mtso",
        exchange:"2400"
      },
      bn3:{
        type:"gift_coupons",
        exchange:"2600"
      },
      bn4:{
        type:"dayticket",
        exchange:"2400"
      },
    }
  },
  mounted(){
    this.queryintegral();
  },
  methods:{
    queryintegral(){
      this.axios.get("/task/select.do").then(res=>{
        if(res.data.code==200){
          this.integr=res.data.data;
        }
      })
    },
    btn1(){
      this.axios.get("/techange/exchange.do?type="+this.bn1.type+"&exchange="+this.bn1.exchange).then(res=>{
        if(res.data.code==200){
          this.$toast(res.data.data);
          this.queryintegral();
        }else {
          this.$toast(res.data.msg);
        }
      })
    },
    btn2(){
      this.axios.get("/techange/exchange.do?type="+this.bn2.type+"&exchange="+this.bn2.exchange).then(res=>{
        if(res.data.code==200){
          this.$toast(res.data.data);
          this.queryintegral();
        }else {
          this.$toast(res.data.msg);
        }
      })
    },
    btn3(){
      this.axios.get("/techange/exchange.do?type="+this.bn3.type+"&exchange="+this.bn3.exchange).then(res=>{
        if(res.data.code==200){
          this.$toast(res.data.data);
          this.queryintegral();
        }else {
          this.$toast(res.data.msg);
        }
      })
    },
    btn4(){
      this.axios.get("/techange/exchange.do?type="+this.bn4.type+"&exchange="+this.bn4.exchange).then(res=>{
        if(res.data.code==200){
          this.$toast(res.data.data);
          this.queryintegral();
        }else {
          this.$toast(res.data.msg);
        }
      })





    }
  }
}
</script>

<style scoped>

.dv{
  margin-top: 20px;
}

.dv2{
  margin-bottom: 5px;
}
.dv3{
  margin-top: 5px;
}
.ig{
  width: 150px;
  height: 70px;
}
.y1{
  margin-left: 5%;
}

</style>